<template>
<div class="user-show">
    <div class="user-info">
        <a-avatar
            :size="40"
            shape="square"
            :src="fullUrl(userInfo.avatar)"
        >
            <template #icon>
                <Icon name="iconfont icon-jurassic_user" size="18"/>
            </template>
        </a-avatar>
        <div class="info">
            <div class="nickname">{{ userInfo.nickname ? userInfo.nickname : '请先登录' }}</div>
            <div class="number" v-if="userInfo.id">ID：{{ userInfo.id }}</div>
        </div>
    </div>
<!--    <div class="tuiguang">-->
<!--        <img src="~/assets/web/images/entery.png" alt="">-->
<!--    </div>-->
    <div class="bottom">
        <a-button v-if="userInfo.isLogin()" type="primary" danger @click="userInfo.logout()">退出</a-button>
        <a-button v-else type="primary" @click="state.login_show = !state.login_show">登录</a-button>
    </div>
</div>
</template>

<script setup lang="ts">
import { useUserInfo } from '/@/stores/userInfo'
import {inject, reactive, ref} from "vue";
import { fullUrl } from '/@/utils/common'

const state: {
    login_show: boolean
} = reactive({
    login_show: inject('login_show', ref(false))
})

const userInfo = useUserInfo()
</script>

<style scoped lang="scss">
.user-show {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 180px;
    .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            .nickname {
                height: 20px;
                color: var(--text-color-black1);
            }
            .number {
                height: 16px;
                color: #919191;
                font-size: 12px;
            }
        }
    }
    .tuiguang {
        width: 100%;
        height: 80px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .bottom {
        border-top: 1px solid #e8e8e8;
        padding: 8px 0;
        button {
            width: 100%;
        }
    }
}
</style>
